<html>
<head>
<style type="text/css">
body { margin: 0; text-align: center; background: #ddd; }
p { margin: 10px; }
#canvas { width: 500px; height: 200px; border: 1px solid #333; background: #fff; margin: 0 auto; position: relative; top: 0; left: 0; overflow: hidden; }
#hero { background: url(img/js-gm01.jpg) no-repeat; position: absolute; top: -1000px; left: -1000px; }
.mushroom_2d { width: 44px; height: 44px; background-position: 0px 0px; }
.mushroom_3d { width: 44px; height: 44px; background-position: 0px -44px !important; }
h1 { display: none; }
h2 { width: 500px; margin: 20px auto; font-weight: normal; font-size: 20px; }
h2 p { float: left; margin: 10px; border: 1px solid #c00; padding: 5px; }
</style>
</head>
<body>

<h1>
<p>Hero (<span id="hx"></span>, <span id="hy"></span>)</p>
<p>Timer (<span id="t"></span>)</p>
</h1>

<h2>
<p>Move player: &larr; and &rarr; </p>
<p>Jump: &uarr; </p>
<p>Change sprite: &darr; </p>
</h2>

<div id="canvas">
  <div id="hero"></div>
</div>

<p>Copyright &copy; 2010 Rodrigo Silveira. <br/>
 Code in progress... Feel free to use the code and improve it and build on it. <br/>
 Contact me at <a href="mailto:webmaster@rodrigo-silveira.com">webmaster@rodrigo-silveira.com</a> with questions, comments, or feedback</p>

<script type="text/javascript">

window.onload = function() {

// get local scope access to document
var doc = document;


var timer = new Object();
 timer.el = doc.getElementById("t");
 timer.count = 0;
 timer.go = function() { setTimeout(run, 35); };

// where the graphical stuff will happen
var canvas = new Object();


// temporary object to handle global stuff
var world = new Object();
 world.gravity = -15;
 world.floor = 100;

// our guy
var hero = new Object();
 hero.el = doc.getElementById("hero");
 hero.x = 20;
 hero.y = 110;
 hero.moveHor = 5;
 hero.velocity = 50;
 hero.isRight = false;
 hero.isLeftt = false;
 hero.isJump = false;

 hero.right = function() { this.el.style.left = (this.x += this.moveHor); };
 hero.left = function() { this.el.style.left = (this.x -= this.moveHor); };
 hero.jump = function() {
      if(this.y <= world.floor)
      {
         this.el.style.top = (this.y -= this.velocity);
         this.velocity += world.gravity;
      }
      else
      {
         this.isJump = false;
         this.velocity = 50;
         this.y = world.floor;
      }
 };


 /**
  * move player vertically and horizontally
  */
 hero.move = function() { 
      if(this.isRight) this.right();
      if(this.isLeft) this.left();
      if(this.isJump) this.jump();
 };


 /**
  * show hero's info for analysis
  */
 canvas.printCoords = function()
 {
   doc.getElementById("hx").innerHTML = hero.x;
   doc.getElementById("hy").innerHTML = hero.y;
 }


 /**
  * handle user input
  */
 doc.onkeydown = function()
 {
   var key = event.keyCode;

   // UP
   if(key == 38) hero.isJump = true;

   // DOWN
   if(key == 40) hero.el.className = 
     (hero.el.className == "mushroom_2d")
     ? "mushroom_3d"
     : "mushroom_2d";

   // LEFT
   if(key == 37) hero.isLeft = true;

   // RIGHT
   if(key == 39) hero.isRight = true;
 };


 /**
  * stop moving when key is released
  */
 doc.onkeyup = function()
 {
   var key = event.keyCode;

   // LEFT
   if(key == 37) hero.isLeft = false;

   // RIGHT
   if(key == 39) hero.isRight = false;
 };


 /**
  * things to perform every timer cycle
  */
 function run()
 {
   hero.move();

   timer.el.innerHTML = timer.count++;
   canvas.printCoords();

   timer.go();
 }

/**
 * initialize important stuff
 */
(function() {
 hero.el.style.left = hero.x;
 hero.el.style.top = hero.y;
 hero.el.className = "mushroom_3d";
 timer.go();
})();

};
</script>
</body>
</html>